.container {
    height: 100%;
    background-color: #F5F5F5;

    .header {
        height: 4rem;
        background: #f37d0f url(https://m.mi.com/static/img/bg.63c8e19851.png) top/cover no-repeat;
        display: flex;

        .user-center {
            margin-left: 1rem;
            align-items: center;
            display: flex;

            .avator {
                width: 2.5rem;
                height: 2.5rem;
                border: 0.2rem solid hsla(0, 0%, 100%, .4);
                border-radius: 50%;
            }

            .user-info {
                margin-left: .5rem;
                display: flex;
                flex-direction: column;

                .username {
                    font-size: .7rem;
                    color: white;
                    opacity: .8;
                }

                .mobile {
                    font-size: .6rem;
                    color: white;
                    opacity: .6;
                }
            }
        }

    }

    .more-order {
        display: flex;
        justify-content: space-between;
        height: 2.2rem;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, .15);
        padding: 0 .8rem;
        background-color: white;

        span {
            font-size: .8rem;
            display: flex;
            align-items: center;
            opacity: .6;
        }

    }

    .order-status {
        background-color: white;
        display: flex;
        align-items: center;
        padding: .5rem;

        li {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: 30%;
                display: block;
            }

            span {
                margin-top: .2rem;
                color: rgba(0, 0, 0, 0.6);
                font-size: .6rem;
            }
        }
    }

    .items {
        margin-top: .5rem;
        background-color: white;
        padding: 0 .8rem;

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 2.6rem;

            .item-summary {
                display: flex;
                color: rgba(0, 0, 0, 0.6);
                font-size: .7rem;
                align-items: center;

                img {
                    width: 1.3rem;
                    display: block;
                    margin-right: .5rem;
                }
            }
        }

        li+li {
            border-top: 1px solid #D9D9D9;
        }
    }
}